<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>交个朋友-发表</title>
		<link rel="stylesheet" type="text/css" href="css/publish-style.css"/>
		<!-- 临时的css样式 -->
		<style>
			#uploadimg{
				width: 100%;
				background-color: #f3f4f8;
				height: 600px;
				position: absolute;
				left: 0px;
				bottom: 0px;
				text-align: center;
			}
			#showimg{
				height: 600px;
			}
			#upimg{
				width: 100%;
				height:600px;
				background-color: aqua;
				position: absolute;
				left: 0px;
				top: 0px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<!-- 表单：配合js使用FormData格式化，ajax异步提交 -->
		<!-- enctype="multipart/form-data" 多文件提交 -->
		<form id="form_file" enctype="multipart/form-data">
			<div class="head">
				<a href="#" class="cancle" id="cancle">取消</a>
				<p class="title">说几句</p>
				<a class="publish" id="publish">发表</a>
			</div>
			<div class="publish-content">
				<textarea maxlength="50" required="required" placeholder="请输入交个朋友的鲜事..." class="publish-content-txt" id="publish-content-txt" name="publish-content-txt"></textarea>
			</div>
			
			<!-- 图片选择及缩略图显示 -->
			<div id="uploadimg">
				<img src="img/photo.png" id="showimg">
				<!--  输入框-获取一张图片-->
				<input type="file" accept="image/*" id="upimg" name="publish-content-img"/>
			</div>

		</form>
	</body>
	<script src="js/jquery-1.10.2.min.js"></script>
	<script>
		// [1]监听图片选择更换
		$("#upimg").change(function(){
			$("#showimg").attr("src",URL.createObjectURL($(this)[0].files[0]));
		})
		// [2]发布按钮的点击事件
		$("#publish").click(function(){
			// 2.1 判断用户是否输入
            if($("#publish-content-txt").val().trim() ===""){
                alert("内容不能为空")
                return false;
            }
            // 2.2 form表单提交 - 文本和文件同时提交的情况 - 需要把form表达内容生成formdata对象进行提交
            // FormData - 生成数据的格式
            // key-value存储：name的值作为key值    input.value就是value
            // {"publish-content-txt":vaule}
            // publish-content-img:图片的位置
            var forms = new FormData($("#form_file")[0]); //可以理解为初始化表达
            // alert(sessionStorage.getItem("nickname"));
            //添加需要补全的数据
            forms.append("nickname",sessionStorage.getItem("nickname"));
            forms.append("sign",new Date().getTime());//当前时间的整体毫秒数
            //"action":"login"  表示一个登录请求的数据提交
            var config = {
                method:"POST",
                url:"/jgpy/publish?action=发布",
                async:true,
                dataType:"text",
                data:forms,
                processData:false,//让jq不处理发送的数据
                contentType:false, //jq设置请求头
                success:function (data){ //如果请求成功 - 回调函数 - data用于接收服务器返回的结果
                    //data : json 字符串格式
                    data = JSON.parse(data);
                    // {code:200,msg:"结果",data:""}
                    if(data.code == "200"){
                        //稍后编写
                        alert(data.msg);
                    //     返回到主页
                        window.location.href = "home.html";

                    }else {
                        alert(data.msg)
                    }
                }
            }
            //1.4 开始请求
            $.ajax(config);








		})
	</script>
</html>
